<style>
.page {
  text-align: center;
  margin-top: 40px;
}
.cc {
  text-align: center;
  margin-top: 40px;
}
.page1 {
  margin-top: 15px;
  margin-left: 15px;
  float: none;
}
.a11 {
  margin-top: 10px;
}
.page2 {
  text-align: center;
  margin-top: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  table-layout: fixed;
}
.page4 {
  float: left;
  margin-top: 15px;
  margin-left: 15px;
}
.page14 {
  float: left;
  margin-top: 15px;
}
.ivu-table-overflowX {
  overflow-x: hidden;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
.myrole {
  margin-left: 10px;
}
.in1 {
  margin-left: 10px;
}
.container {
  padding: 10px;
}
h2 {
  text-align: center;
}
/* radio每个选项一行显示 */
.el-radio {
  float: none;
  white-space: normal;
  line-height: 23px;
  display: block;
  margin-left: 20px;
}
</style>
<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/main/myInfo">
        <e-icon icon-name="el-icon-s-home"></e-icon>主页
      </BreadcrumbItem>
      <BreadcrumbItem>
        <e-icon icon-name="fa fa-thumbs-o-up"></e-icon>评价管理
      </BreadcrumbItem>
      <BreadcrumbItem>学生评教管理
      </BreadcrumbItem>
    </Breadcrumb>
    <Divider />

    <Select
      class="in1"
      style="width: 200px"
      v-model="formData.evaluateTaskId"
      placeholder="请选择评价任务"
      clearable
    >
      <Option
        v-for="sli in allEvaluateTask"
        :key="sli.id"
        :label="sli.value"
        :value="sli.id"
      ></Option>
    </Select>

    <Button class="in1" type="primary" icon="ios-search" @click="getRecords"
      >刷新</Button
    >

    <Table
      style="width: 100%"
      context-menu
      show-context-menu
      class="page1"
      border
      :columns="columns1"
      :data="data.records"
      :loading="loading"
    >
    </Table>

    <Page
      class="cc"
      :total="data.total"
      :current="data.current"
      :page-size="6"
      :page-size-opts="pagesizeopts"
      @on-change="changePage"
      @on-page-size-change="sizeChange"
      show-elevator
      show-total
      show-sizer
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :title="dialogTitle"
    >
      <el-row>
        <el-col :span="12"> 评教类型：{{ formData.evaluateTypeName }} </el-col>
        <el-col :span="12"> 教师：{{ formData.teacherName }} </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="formData" :model="formData">
        <div v-if="formData.evaluateTypeId == 2">
          <div
            v-for="(targetVo, index) in formData.evaluateTargetVoList2"
            :key="index"
          >
            <h4>{{ targetVo.name }}</h4>
            <el-form-item v-if="targetVo.evaluateTargetOptionList.length > 0">
              <el-radio-group v-model="formData.optionIdList2[index]">
                <el-radio
                  v-for="option in targetVo.evaluateTargetOptionList"
                  :key="option.id"
                  :label="option.id"
                  :disabled="saveFlag === false"
                  >{{ option.content }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div v-if="formData.evaluateTypeId == 3">
          <div
            v-for="(targetVo, index) in formData.evaluateTargetVoList3"
            :key="index"
          >
            <h4>{{ targetVo.name }}</h4>
            <el-form-item v-if="targetVo.evaluateTargetOptionList.length > 0">
              <el-radio-group v-model="formData.optionIdList3[index]">
                <el-radio
                  v-for="option in targetVo.evaluateTargetOptionList"
                  :key="option.id"
                  :label="option.id"
                  :disabled="saveFlag === false"
                  >{{ option.content }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div v-if="formData.evaluateTypeId == 4">
          <div
            v-for="(targetVo, index) in formData.evaluateTargetVoList4"
            :key="index"
          >
            <h4>{{ targetVo.name }}</h4>
            <el-form-item v-if="targetVo.evaluateTargetOptionList.length > 0">
              <el-radio-group v-model="formData.optionIdList4[index]">
                <el-radio
                  v-for="option in targetVo.evaluateTargetOptionList"
                  :key="option.id"
                  :label="option.id"
                  :disabled="saveFlag === false"
                  >{{ option.content }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div v-if="formData.evaluateTypeId == 5">
          <div
            v-for="(targetVo, index) in formData.evaluateTargetVoList5"
            :key="index"
          >
            <h4>{{ targetVo.name }}</h4>
            <el-form-item v-if="targetVo.evaluateTargetOptionList.length > 0">
              <el-radio-group v-model="formData.optionIdList5[index]">
                <el-radio
                  v-for="option in targetVo.evaluateTargetOptionList"
                  :key="option.id"
                  :label="option.id"
                  :disabled="saveFlag === false"
                  >{{ option.content }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <Button size="large" @click="closeDialog">关闭</Button>
        <Button size="large" @click="save" v-if="saveFlag" type="primary"
          >保存</Button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "studentIndex",
  created() {
    this.getAllEvaluateTask();
    this.getRecords();
    this.getEvaluateTargetVoList();
  },
  data() {
    return {
      data: {},
      loading: false, // 后台忙标志
      dialogTitle: "",
      dialogVisible: false,
      saveFlag: false,
      allEvaluateTask: [], // 评教任务备选项
      records: null, // 表格数据集
      // 分页参数
      pageIndex: 1, // 页号
      pageSize: 6, // 每页行数
      total: 0, // 总行数
      //每页展示条数
      pagesizeopts: [6, 10, 15, 20],
      formData: {
        sysUserId: this.$store.state.myInfo.id, // 评教人
        evaluateTypeId: null, // 评教类型
        evaluateTypeName: "",
        teacherId: null, // 被评价人
        teacherName: "",
        evaluateTaskId: null, // 评教任务
        // 自评指标
        evaluateTargetVoList2: [], // 指标集
        targetIdList2: [], // 存在备选项的指标Id
        optionIdList2: [], // 选中备选项的Id
        // 同行评教指标
        evaluateTargetVoList3: [],
        targetIdList3: [],
        optionIdList3: [],
        // 教研室评教指标
        evaluateTargetVoList4: [],
        targetIdList4: [],
        optionIdList4: [],
        // 系部评教指标
        evaluateTargetVoList5: [],
        targetIdList5: [],
        optionIdList5: [],
      },
      //评价任务的表格
      columns1: [
        {
          title: "工号",
          key: "code",
          width: 100,
        },
        {
          title: "教师",
          key: "name",
          width: 150,
        },
        {
          title: "性别",
          key: "sexName",
          width: 100,
        },
        {
          title: "联系电话",
          key: "mobile",
          width: 180,
        },
        {
          title: "部门",
          key: "deptName",
          width: 180,
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let op2 = params.row.op2;
            let op3 = params.row.op3;
            let op4 = params.row.op4;
            let op5 = params.row.op5;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",

                    icon: "md-create",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                    display: op2 === 1 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doEvaluate(params.row, 2, "教师自评");
                    },
                  },
                },
                "教师自评"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",

                    icon: "md-glasses",
                  },
                  style: {
                    marginLeft: "20px",
                    display: op2 === 2 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doDetails(params.row, 2, "自评详情");
                    },
                  },
                },
                "自评详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",

                    icon: "md-create",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                    display: op3 === 1 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doEvaluate(params.row, 3, "同行评教");
                    },
                  },
                },
                "同行评教"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",

                    icon: "md-glasses",
                  },
                  style: {
                    marginLeft: "20px",
                    display: op3 === 2 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doDetails(params.row, 3, "同行评教详情");
                    },
                  },
                },
                "同行评教详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",

                    icon: "md-create",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                    display: op4 === 1 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doEvaluate(params.row, 4, "教研室评教");
                    },
                  },
                },
                "教研室评教"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",

                    icon: "md-glasses",
                  },
                  style: {
                    marginLeft: "20px",
                    display: op4 === 2 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doDetails(params.row, 4, "教研室评教详情");
                    },
                  },
                },
                "教研室评教详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",

                    icon: "md-create",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                    display: op5 === 1 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doEvaluate(params.row, 5, "系部评教");
                    },
                  },
                },
                "系部评教"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",

                    icon: "md-glasses",
                  },
                  style: {
                    marginLeft: "20px",
                    display: op5 === 2 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doDetails(params.row, 5, "系部评教详情");
                    },
                  },
                },
                "系部评教详情"
              ),
              h(
                "Tag",
                {
                  style: {
                    marginLeft: "20px",
                    display:
                      (op2 === 0 && op3 === 0 && op4 === 0 && op5 === 0) ||
                      (op2 === null &&
                        op3 === null &&
                        op4 === null &&
                        op5 === null)
                        ? "inline-block"
                        : "none",
                  },
                },
                "暂无评教任务"
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    getEvaluateTargetVoList() {
      for (let tid = 2; tid <= 5; tid++) {
        this.$axios
          .get("/evaluateRecord/listEvaluateTargetVoListByEvaluateTypeId", {
            params: {
              evaluateTypeId: tid,
            },
          })
          .then((result) => {
            this.formData["evaluateTargetVoList" + tid] = result.data.data;
            var arr = [];
            result.data.data.forEach((vo) => {
              if (vo.evaluateTargetOptionList.length > 0) {
                arr.push(vo.id);
              }
            });
            console.log(arr);
            this.formData["targetIdList" + tid] = arr;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      console.log(this.formData.targetIdList);
    },
    getAllEvaluateTask() {
      this.loading = true;
      var _this = this;
      this.$axios
        .get("/evaluateRecord/listAllEvaluateTask")
        .then((result) => {
          _this.loading = false;
          _this.allEvaluateTask = result.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getRecords() {
      this.loading = true;
      var qo = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        evaluateTaskId: parseInt(this.formData.evaluateTaskId),
        sysUserId: this.formData.sysUserId,
      };

      this.$axios
        .post("/evaluateRecord/listPagedEmpEvaluate", qo)
        .then((result) => {
          this.data = result.data.data;
          this.records = result.data.data.records;
          this.total = result.data.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    doEvaluate(row, evaluateTypeId, evaluateTypeName) {
      this.saveFlag = true;
      this.dialogVisible = true;
      this.dialogTitle = "评教";
      this.formData.evaluateTypeName = evaluateTypeName;
      this.formData.teacherName = row.name;
      this.formData.evaluateTypeId = evaluateTypeId;
      this.formData.teacherId = row.id;
      this.formData.optionIdList2 = [];
      this.formData.optionIdList3 = [];
      this.formData.optionIdList4 = [];
      this.formData.optionIdList5 = [];
    },
    doDetails(row, evaluateTypeId, evaluateTypeName) {
      this.saveFlag = false;
      this.dialogVisible = true;
      this.dialogTitle = "评教记录详情";
      this.formData.evaluateTypeName = evaluateTypeName;
      this.formData.teacherName = row.name;
      this.formData.evaluateTypeId = evaluateTypeId;
      this.formData.teacherId = row.id;
      // 构造选中项(非叶子指标补null)
      for (let i = 2; i <= 5; i++) {
        var k = 0;
        if (row["optionIdList" + i] !== null) {
          var arr = [];
          this.formData["evaluateTargetVoList" + i].forEach((vo) => {
            if (vo.evaluateTargetOptionList.length > 0) {
              arr.push(row["optionIdList" + i][k]);
              k++;
            } else {
              arr.push(null);
            }
          });
          this.formData["optionIdList" + i] = arr;
        }
      }
    },
    save() {
      var tid = this.formData.evaluateTypeId; // 移除null
      var arrOptionId = this.formData["optionIdList" + tid].filter(
        (x) => x != null
      );
      if (arrOptionId.length < this.formData["targetIdList" + tid].length) {
        this.$message.error({
          offset: 60,
          message: "请评价完成后再提交评价结果",
        });
        return;
      }
      this.loading = true;

      var po = [];
      this.formData["targetIdList" + tid].forEach((targetId, i) => {
        po.push({
          evaluateTaskId: this.formData.evaluateTaskId,
          evaluateTypeId: this.formData.evaluateTypeId,
          sysUserId: this.formData.sysUserId,
          teacherId: this.formData.teacherId,
          evaluateTargetId: targetId,
          evaluateTargetOptionId: arrOptionId[i],
        });
      });
      this.$axios
        .post("/evaluateRecord/saveRecord", po)
        .then((result) => {
          if (result.data.code === 0) {
            this.dialogVisible = false;
            this.$Message.success({
              top: 30,
              duration: 2.5,
              background: true,
              content: "评教成功",
            });
            this.getRecords();
          } else {
            this.$Message.error({
              top: 30,
              duration: 2.5,
              background: true,
              content: result.data.msg,
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变页数时
    changePage(e) {
      //变更查询时的页数条件
      this.pageIndex = e;
      this.getRecords();
    },
    sizeChange(e) {
      this.pageSize = e;
      this.getRecords();
    },
  },
};
</script>